/**
 * 家庭成员详情页面
 * 展示单个家庭成员的完整信息
 * 
 * 功能说明：
 * - 显示成员的QR码（模拟样式）
 * - 展示完整的个人信息
 * - 支持加载状态和错误处理
 * - 使用动态路由参数获取成员ID
 * 
 * @author 项目开发团队
 * @version 1.0.0
 */

import React, { useEffect, useState } from 'react'
import { useParams, useNavigate } from 'react-router-dom'
import { Card, Skeleton, Toast } from 'antd-mobile'
import TopNavbar from '../../components/TopNavbar'
import styles from './MemberDetail.module.css'
import { getFamilyMemberDetail } from '../../services/familyService'

/**
 * 家庭成员详情页面组件
 * @returns {JSX.Element} 成员详情页面
 */
const MemberDetail = () => {
  const { id } = useParams()                    // 从URL参数获取成员ID
  const navigate = useNavigate()                // 路由导航函数
  const [loading, setLoading] = useState(true)  // 加载状态
  const [member, setMember] = useState(null)    // 成员详细信息

  /**
   * 组件挂载时获取成员详情
   * 根据URL参数中的ID获取对应的成员信息
   */
  useEffect(() => {
    if (id) {
      getFamilyMemberDetail(id)
        .then(setMember)                        // 成功时更新成员信息
        .catch(() => {                          // 失败时显示错误提示
          Toast.show({
            content: '获取详情失败',
            icon: 'fail'
          })
        })
        .finally(() => setLoading(false))       // 无论成功失败都停止加载
    }
  }, [id])

  // 加载状态 - 显示骨架屏
  if (loading) {
    return (
      <div className={styles.page}>
        <TopNavbar title="就诊人详情" showBack onBack={() => navigate(-1)} />
        <div className={styles.container}>
          <Skeleton.Paragraph animated lineCount={10} />
        </div>
      </div>
    )
  }

  // 成员不存在 - 显示错误信息
  if (!member) {
    return (
      <div className={styles.page}>
        <TopNavbar title="就诊人详情" showBack onBack={() => navigate(-1)} />
        <div className={styles.container}>
          <div className={styles.error}>未找到该成员信息</div>
        </div>
      </div>
    )
  }

  return (
    <div className={styles.page}>
      {/* 顶部导航栏 */}
      <TopNavbar title="就诊人详情" showBack onBack={() => navigate(-1)} />
      
      <div className={styles.container}>
        {/* QR码区域 - 模拟二维码样式 */}
        <div className={styles.qrSection}>
          <div className={styles.qrCode}>
            <div className={styles.qrPlaceholder}>
              <div className={styles.qrGrid}>
                {/* 生成64个点模拟二维码 */}
                {Array.from({ length: 64 }, (_, i) => (
                  <div key={i} className={styles.qrDot}></div>
                ))}
              </div>
            </div>
          </div>
        </div>

        {/* 基本信息区域 - 使用Card组件展示 */}
        <Card className={styles.infoCard}>
          <div className={styles.sectionTitle}>基本信息</div>
          
          {/* 就诊人关系 */}
          <div className={styles.infoItem}>
            <span className={styles.label}>就诊人关系</span>
            <span className={styles.value}>{member.relation}</span>
          </div>

          {/* 患者姓名 */}
          <div className={styles.infoItem}>
            <span className={styles.label}>患者姓名</span>
            <span className={styles.value}>{member.name}</span>
          </div>

          {/* 性别 */}
          <div className={styles.infoItem}>
            <span className={styles.label}>性别</span>
            <span className={styles.value}>{member.gender}</span>
          </div>

          {/* 年龄 */}
          <div className={styles.infoItem}>
            <span className={styles.label}>年龄</span>
            <span className={styles.value}>{member.age}岁</span>
          </div>

          {/* 证件类型 */}
          <div className={styles.infoItem}>
            <span className={styles.label}>证件类型</span>
            <span className={styles.value}>{member.idType}</span>
          </div>

          {/* 证件号 */}
          <div className={styles.infoItem}>
            <span className={styles.label}>证件号</span>
            <span className={styles.value}>{member.idNumber}</span>
          </div>

          {/* 联系电话 */}
          <div className={styles.infoItem}>
            <span className={styles.label}>联系电话</span>
            <span className={styles.value}>{member.phone}</span>
          </div>

          {/* 现住址 */}
          <div className={styles.infoItem}>
            <span className={styles.label}>现住址</span>
            <span className={styles.value}>{member.address}</span>
          </div>
        </Card>
      </div>
    </div>
  )
}

export default MemberDetail
